<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>层级</title>
    <script src="./jquery-3.3.1.min.js"></script>
</head>
<body>
    <style>
        body{
            margin:0;
            padding:0;
        }
        ul{
            padding:0;
        }
        ul>li{
        list-style: none;
        }
    </style>
    <ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>
        <li>l4</li>
        <li>l5</li>
        <li>l6</li>
    </ul>
    <form action="">
        答案：<input type="text">
        <p>我们都是好孩子</p>
        <span>我们都是孩子</span>
        <p>我们都是坏孩子</p>
        <p>我们都是男孩子</p>
    </form>
    <script>
        // FIRST：Child Selector ('parent>Child')
        //选择所有指定“parent”元素中指定的"child"的直接子元素。
        //给属于父标签的ul的子标签li加边框
        $('ul>li').css('border','3px solid red')
        //SECOND：Descendant Selector ("ancestor descendant")
        //选择给定的祖先元素的所有后代元素。
        //给ul下的li加背景颜色黄色
        $('ul').css('background-color','yellow')
        //Next Adjacent Selector ("prev + next")
        //THIRD：选择与“next”匹配的所有下一个元素，该元素紧跟在“prev”之前。
        //给input后面的p加蓝色边框
        $('input+p').css('border','2px solid blue');
        //FOUTH：Next Siblings Selector ("prev ~ siblings")
        //匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器。
        //给和input同级的所有P标签家字体颜色紫色
        $('input~p').css('color','purple')



    </script>
</body>
</html>